<template>
	<view>
		<view class="collapse_item u-flex-y-center"  @click="showpicker=true">
			<text style="max-width:60px;
			width:auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;">{{item.title}}</text>
			<view class="arrow-icon">
				<image src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/down.png"></image>
			</view>
		</view>
		<u-picker :show="showpicker" :defaultIndex="item.defaultIndex" @close="cancel" closeOnClickOverlay
			:columns="[item.array]" :itemHeight="80" :title="item.label" @cancel="cancel" keyName="name"
			@confirm="confirm_prcker" :showToolbar="showToolbar"></u-picker>
	</view>
</template>

<script>
	import {
		getMatchList,
		getMemberList
	} from '@/common/api.js'
	export default {
		name: 'yyChoosecade',
		props: {
			value: {
				type: [Number, String, Array],
				default: () => {}
			},
			config: {
				type: Object,
				default: () => {}
			},
			// collapselist :{
			// 	type: Array,
			// 	default:[]
			// }
		},
		computed:{
			modelValue: {
				get() {
					console.log(this.value)
					return this.value
				},
				set(value) {
					
					this.$emit('input', value)
				}
			},
		},
		watch: {
			
			message: {

			}
		},
		created(){
				console.log(this.modelValue)
		},
		data() {
			return {
				showToolbar: false,
				defaultIndex: [0],
				closeOnClickOverlay: false,
				showpicker: false,
				columns: [],
				immediate: true,
				item:this.config,
				// is_agree: false,
				values: '',
				MatchList: [],
				MemberList: []
			}
		},
		onLoad() {

		},
		created() {

		},
		onShow() {

		},
		methods: {
			cancel() {
				this.showpicker = false
			},
			confirm_prcker(e){
				if((this.value==0&&e.value[0].id=='全部')||this.value==e.value[0].id){
					this.cancel()
					return
				}
					this.modelValue=e.value[0].id=='全部'?0:e.value[0].id
					this.$emit('change_list', {
						name: e.value[0].name,
						obj: this.item
					})
					this.cancel()
			},

		}
	}
</script>

<style lang="scss">
	.collapse_item {
		padding: 12rpx;
		box-sizing: border-box;
		text {
			font-size: 28rpx;
			color: #000000;
		}
		
		.arrow-icon {
			width: 20rpx;
			height: 12rpx;
			margin-left: 27rpx;
		}
	}
	
</style>
